<template>
  <div class="search-box" ref="searchRef">
    <ElInput :prefix-icon="Search" v-model="input" :placeholder="t('home.InputPlaceholder')" class="zee-form-height-40" @keydown.enter.native="inputSearch" @input="inputSearch"/>
    <transition name="searchboxname">
    <div class="search-result-wrapper" v-if="showSearchBox" v-loading="loading">
      <h2><span>{{ t('home.SearchResult') }}</span>{{t('home.About')}} {{list.length}} {{t('home.results')}}</h2>
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="search-box-image"><img v-zlazy="item.imgPlay" alt=""></div>
          <div class="search-box-info">
            <h3>{{ item.gameName }}</h3>
            <div class="search-info-footer">
              <h4>RTP: <span>{{ item.gameRtp }}</span> <em>{{ item.gameChannelName }}</em> </h4>
              <div class="open-game" @click="gotoPlay(item)">{{ t('REDBUG.OpenNow') }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    </transition>
  </div>
  <TipsRecharge v-model:visible="showTipsRecharge"/>
</template>

<script setup lang="ts" name="CurrencyExchange">
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import gamesApi from '@/api/modules/games';
import nocache from '@/store/nocache';
import { Search } from '@element-plus/icons-vue';
import { throttle } from '@/utils/format';
import { useClickAway } from '@vant/use';

const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const piniaNocache:any = nocache();
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const currentWallet: any = computed(()=> piniaUserinfo.getCurrentWallet);

const data:any = reactive({
  input: "",
  list: [],
  loading: false,
  searchRef: null,
  showSearchBox: false,
  showTipsRecharge: false,
});

const {
  input,
  list,
  loading,
  searchRef,
  showSearchBox,
  showTipsRecharge,
} = toRefs(data);

watch(
  () => input.value,
  (val, preVal) => {
  },
  { immediate: false, deep: true },
);

watch(
  () => route.fullPath,
  (val, preVal) => {
    closeSearchBox();
  },
  { immediate: false, deep: true },
);

const openSearchBox = () => {
  showSearchBox.value = true;
}

const closeSearchBox = () => {
  showSearchBox.value = false;
}

const inputSearch = throttle(()=>{
  if(input.value !== ""){
    findAllGameByName();
  }else{
    list.value = [];
  }
}, .5);

const findAllGameByName = () => {
  loading.value = true;
  gamesApi.findAllGameByName({
    name: input.value,
    languageType: piniaSystem.getLang.code
  }).then((response:any)=>{
    console.log('搜索结果', response);
    if(response.code === 200){
      openSearchBox();
      list.value = (response.data.hallGame || []).map((item:any) => {
        return {
          ...item,
          gameName: item.languageChildren[0] && item.languageChildren[0].languageName
        }
      });
    }
  }).finally(()=>{
    loading.value = false;
  })
}

const gotoPlay = (game:any) => {
  if(piniaUserinfo.getHaslogged){
    // 已经登录
    if(game.gameId && game.gameId.trim()){
      const data = {
        playId: game.playId,
        imgPlay: game.imgPlay,
        gameName: game.gameName,
        fromPath: route.fullPath,
      }
      if(currentWallet.value.money > 0){
        router.replace({
          path: '/playbox',
          query: data
        });
      }else{
        showTipsRecharge.value = true;
      }
    }
  }else{
    // 未登录
    piniaNocache.openLogin();
  }
}

useClickAway(searchRef, () => {
  closeSearchBox();
});

</script>

<style lang="scss" scoped>
@import url('./index.scss');
$timer: 0.4s;
.searchboxname-enter-active {
  animation: fadeIn $timer;
}
.searchboxname-leave-active {
  animation: fadeOut $timer;
}
</style>
